<template>
  <nav
    class="navbar navbar-dark navbar-expand-md topnav-menu"
    v-if="printMode === 0"
  >
    <template v-if="logined">
      <div class="collapse navbar-collapse">
        <ul class="navbar-nav me-auto">
          <li class="nav-item">
            <router-link to="/my/page" class="nav-link">
              <i class="mdi mdi-speedometer me-1"></i>工作台
            </router-link>
          </li>

          <li class="nav-item dropdown active" v-for="info in menus">
            <a
              class="nav-link dropdown-toggle arrow-none"
              href="javascript: void(0);"
              role="button"
              data-bs-toggle="dropdown"
            >
              {{ info.caption }}
              <div class="arrow-down"></div>
            </a>
            <div class="dropdown-menu">
              <template v-for="sub in info.submenus">
                <template v-if="sub.to === ''">
                  <div class="dropdown-divider"></div>
                </template>
                <template v-else>
                  <router-link :to="sub.to" class="dropdown-item">{{
                    sub.caption
                  }}</router-link>
                </template>
              </template>
            </div>
          </li>
        </ul>

        <span class="nav navbar-nav navbar-right" id="loginBar">
          <template v-if="logined">
            <router-link
              to="/admin/config"
              class="buk-nav-item me-2 text-white"
              v-if="isAdmin"
              >设置</router-link
            >
            <router-link to="/recharge" class="buk-nav-item text-white"
              >充值</router-link
            >

            <button
              type="button"
              class="btn btn-sm"
              @click.stop="switchThemeMode"
            >
              switch
            </button>
          </template>
        </span>
      </div>
    </template>
  </nav>
</template>


<script>
import $ from "jquery";

export default {
  computed: {
    themeMode() {
      return this.$store.state.themeMode;
    },
    logined() {
      return this.$store.state.logined;
    },
    isAdmin() {
      return this.$store.getters.isAdmin;
    },
    username() {
      return this.$store.state.username;
    },
    sid() {
      return this.$store.state.sid;
    },
    menus() {
      return this.$store.getters.authorizedMenus;
    },
    printMode() {
      return this.$store.state.printMode;
    },
  },
  methods: {
    switchThemeMode: function () {
      console.log($.App.getLayoutConfig());
      // $.App.deactivateDarkMode()
      // $.App.activateLightSidebarTheme()
      // $.App.activateDarkMode()
      // $.App.deactivateDarkMode()
      // $.App.resetLayout($.App.activateDarkMode())
      // $.App.clearSavedConfig()
      if (this.themeMode === 0) {
        this.$store.commit("setThemeMode", 1);
      } else {
        this.$store.commit("setThemeMode", 0);
      }
    },
  },
};
</script>
